<template>
  <Layout :class="'bg-white p-2'">
    <Row :class="'m-1'">
      <Col span="4">
        <Button
          class="m-2"
          type="error"
          @click="newEquipment"
          style="width: 70px;"
          >新增</Button
        >
      </Col>
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchId"
          placeholder="请输入设备编号"
        />
      </Col>
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchEquipmentName"
          placeholder="请输入设备名称"
        />
      </Col>
      <Col span="4">
        <Button
          class="m-2"
          type="primary"
          shape="circle"
          @click="search"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>
    <Layout :class="'bg-white'">
      <Table
        border
        :class="'m-1'"
        :columns="tableInfo.columnInfo"
        :data="tableInfo.data"
      >
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(row)"
            >详细</Button
          >
          <Button type="error" size="small" @click="remove(row)">删除</Button>
        </template>
      </Table>
    </Layout>
  </Layout>
</template>
<script>
export default {
  data() {
    var self = this
    return {
      searchId: '',
      searchEquipmentName: '',
      searchSec: '',
      tableInfo: {
        currentPage: 1, //默认第一页
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '#',
            width: 80,
            fixed: 'left',
            align: 'center',
            render: (h, params) => {
              return h(
                'span',
                params.index +
                  (self.tableInfo.currentPage - 1) * self.tableInfo.size +
                  1
              )
            },
          },
          {
            title: '设备编号',
            key: 'id',
            width: 200,
          },
          {
            title: '设备名称',
            key: 'equipmentName',
            width: 300,
          },
          {
            title: '设备信息',
            key: 'equipmentInfo',
            width: 550,
          },
          {
            title: '设备开关',
            key: 'statu',
            width: 200,
            align: 'center',
            render: function(h, params) {
              console.log(self.tableInfo.data)
              return h('div', [
                h('i-switch', {
                  props: {
                    type: 'primary',
                    size: 'large',
                    value: params.row.statu,
                    'true-value': 1,
                    'false-value': 0,
                  },
                  scopedSlots: {
                    open: function() {
                      return h('span', '使用中')
                    },
                    close: function() {
                      return h('span', '未启用')
                    },
                  },
                  on: {
                    'on-change': (val) => {
                      self.http.put({
                        url: '/equipment/status',
                        param: {
                          id: params.row.id,
                          statu: val,
                        },
                      })
                    },
                  },
                }),
              ])
            },
          },
          {
            title: '数据时间',
            key: 'datetime',
            width: 200,
          },
          {
            title: '操作',
            slot: 'action',
          },
        ],
        data: [],
      },
    }
  },
  methods: {
    newEquipment: function() {
      this.$router.push({
        name: 'machine_new',
      })
    },
    show: function(row) {
      this.$router.push({
        name: 'machine_detaile',
        params: {
          row,
        },
      })
    },
    remove: function(row) {
      this.message.confirm({
        title: '删除提示',
        content: '即将删除该设备，确定吗？',
        onOk: () => {
          this.http
            .delete({
              url: '/equipment/' + row.tableId,
            })
            .then((data) => {
              this.search()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    search: function() {
      if (this.searchId == '') {
        this.searchId = null
      }
      if (this.searchEquipmentName == '') {
        this.searchEquipmentName = null
      }

      var createdPOJO = {
        id: this.searchId,
        equipmentName: this.searchEquipmentName,
      }
      this.http
        .get({
          url: '/equipment/list',
          param: createdPOJO,
        })
        .then((data) => {
          this.$data.tableInfo.data = data
        })
    },
    changeSize: function(changeSize) {
      this.$data.tableInfo.size = changeSize
    },
    pageSearch: function(changedPage) {
      this.$data.tableInfo.currentPage = changedPage
      var pageSearchPOJO = {
        page: this.$data.tableInfo.currentPage,
        size: this.$data.tableInfo.size,
      }
      this.http
        .get({
          url: '/user/list/',
          param: pageSearchPOJO,
        })
        .then((data) => {
          this.$data.tableInfo.currentPage = data.page
          this.$data.tableInfo.total = data.totalCount
          this.$data.tableInfo.size = data.size
          this.$data.tableInfo.pageSize = data.totalPage
          this.$data.tableInfo.data = data.userList
        })
    },
  },
  created: function() {
    var createdPOJO = {
      id: null,
      equipmentName: null,
    }
    this.http
      .get({
        url: '/equipment/list',
        param: createdPOJO,
      })
      .then((data) => {
        this.$data.tableInfo.data = data
      })
  },
}
</script>

<style></style>
